<!-- 编辑富文本 -->
<template>
  <Editor ref="editorRef" v-model="content" :api-key="apiKey" :init="init" />
</template>
<script setup lang="ts">
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import './hooks/importOption'
import { uploadFileApi } from '@/global/api/common';
import { blobType } from './hooks/option';

// 传入值
const props = defineProps({
  // 值
  modelValue: {
    type: String,
    default: ''
  },
  // 工具栏
  toolbar: {
    type: [String, Array],
    default: [
      // 撤销 重做 文字样式（h1,h2...） 字体 大小 颜色 加粗 斜体 下划线 删除线 左对齐 居中对齐 右对齐
      'undo redo | formatselect fontselect fontsizeselect forecolor bold italic underline strikethrough alignleft aligncenter alignright alignjustify ' +
      // 减少缩进 添加缩进 行高 分割线 删除样式
      'outdent indent lineheight removeformat hr ' +
      // 插件
      '| link numlist bullist insertdatetime table image media'
    ]
  },
  // 预设文字
  placeholder: { type: String, default: '请输入...' },
  // 菜单栏配置
  menubar: { type: [String, Array, Boolean], default: false },
  // 高度
  height: { type: [String, Number], default: 600 }
})
const emits = defineEmits(['update:modelValue', 'input'])

const editorRef = ref<InstanceType<typeof Editor>>()
// 这里必须初始化一下 不然全局的tinymce为undefined 插件内部需要这个tinymce来注入插件的
onMounted(() => {
  tinymce.init({})
})

// 内容
const content = ref(props.modelValue)
// 监听内容变动 更新到传入值
watch(() => content.value, (newValue) => {
  emits('update:modelValue', newValue)
  // emits('input', newValue)
})
// 监听外部value改变
watch(() => props.modelValue, (newValue) => {
  content.value = newValue
})


// tinymce key
const apiKey = `6bg5tsfuild1pkuibqf7wa3ehfe2kt7r8axzg4xyssv3hsev`
// 因为自己引入插件或者一些包 tinymce会自己引入cdn中的包 为了确保上线不会因为cdn出问题导致项目崩溃 所以尽可能引入本地依赖的东西
// 配置
const init = {
  deprecation_warnings: false,
  skin_url: import.meta.env.VITE_APP_RICHTEXT_SKIN_URL, // 皮肤路径 为了不使用cdn的静态资源访问 所以存到了public
  content_css: import.meta.env.VITE_APP_RICHTEXT_CONTENT_CSS,
  // 自定义内容基础样式
  content_style: 'body { font-family: 微软雅黑; font-size:10pt }',
  language_url: import.meta.env.VITE_APP_RICHTEXT_LANGUAGE_URL, // 中文语言包
  language: "zh_CN", // 语言类型 
  placeholder: props.placeholder, // textarea中的提示信息
  min_width: 320, // 最小宽度
  min_height: 220, // 最小高度
  height: props.height, // 注：引入autoresize插件时，此属性失效
  resize: "true", // 编辑器宽高是否可变，false-否,true-高可变，'both'-宽高均可，注意引号
  branding: false, //tiny技术支持信息是否显示
  // statusbar: false,  //最下方的元素路径和字数统计那一栏是否显示
  // elementpath: false, //元素路径是否显示
  font_formats:  //字体样式
    "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",
  // 插件
  plugins:
    "lists advlist insertdatetime table link image imagetools paste media",
  // 工具栏配置，设为false则隐藏 官方文档：https://www.tiny.cloud/docs/general-configuration-guide/basic-setup/#toolbarconfiguration
  // 配置列表 以及内置插件 https://www.tiny.cloud/docs/advanced/available-toolbar-buttons/
  toolbar: props.toolbar,
  // menubar: "file edit my1", //菜单栏配置，设为false则隐藏，不配置则默认显示全部菜单 官方文档：https://www.tiny.cloud/docs/general-configuration-guide/basic-setup/#menuandmenubarconfiguration
  menubar: false,
  // images_upload_url: '/apib/api-upload/uploadimg',  //后端处理程序的url，建议直接自定义上传函数image_upload_handler，这个就可以不用了
  // images_upload_base_path: '/demo',  //相对基本路径--关于图片上传建议查看--http://tinymce.ax-z.cn/general/upload-images.php
  // 图片插件相关配置：https://www.tiny.cloud/docs/plugins/opensource/image/
  // 图片工具配置
  // imagetools_toolbar: 'rotateleft rotateright | flipv fliph | editimage imageoptions',
  // 图片工具跨域配置
  imagetools_cors_hosts: ['*'],
  imagetools_credentials_hosts: ['*'],
  //图片是否可粘贴
  paste_data_images: true,
  // 配置可拖拽/上传的文件类型
  image_file_types: 'jpeg,jpg,jpe,jfi,jfif,png,gif,bmp,webp',
  // 图片是否有标题
  image_caption: true,
  image_title: true,
  // 自动转换URL 开关
  convert_urls: false,
  //此处为图片上传处理函数
  images_upload_handler: (blobInfo: any, success: Function, failure: Function) => {
    let filename = blobInfo.filename()
    const startIndex = filename.lastIndexOf('.')
    let file_type = filename.substring(startIndex + 1, filename.length).toLowerCase()
    file_type = file_type ? blobType[file_type] : ''
    let file = new window.File([blobInfo.blob()], filename, {type: file_type, lastModified: Date.now()})
    let sendData = new FormData()
    sendData.append('file', file)
    uploadFileApi(sendData).then(res => {
      success(res.data.url)
    }).catch(() => { failure() })

    // 这里用base64的图片形式上传图片,
    // let reader = new FileReader(); //本地预览
    // reader.readAsDataURL(blobInfo.blob());
    // reader.onloadend = () => {
    //   const imgbase64 = reader.result;
    //   success(imgbase64);
    // };
    // reader.onerror = () => {
    //   failure()
    // }
  },
  // 自定义插入视频格式
  // video_template_callback: (data: { source: string }) => {
  //   return `<video width="745" height="420" controls="controls" src=${data.source} />`
  // },
  // 自定义上传文件
  file_picker_callback: (callback: Function, value: any, meta: { filetype: string }) => {
    // 判断视频
    if (meta.filetype === 'media') {
      const input: any = document.createElement('input')
      input.setAttribute('type', 'file')
      input.onchange = async function () {
        let sendData = new FormData()
        sendData.append('file', input.files[0])
        uploadFileApi(sendData).then(res => {
          callback(res.data.url)
        })
      }
      input.click()
    }
  }

}

</script>
<style scoped lang="scss">
</style>
<style lang="scss">
  .tox {
    z-index: 3001 !important;
  }
</style>